<template>
	<view class="app-container">
		<!-- 用户信息 -->
		<view class="author-info">
			<image :src="post.userVO.avatarUrl" class="app-avatar avatar"></image>
			<view class="info">
				<view class="name">{{ post.userVO.nickname }}</view>
				<view class="desc">{{ post.userVO.signature ? post.userVO.signature : defaultSignature }}</view>
			</view>
			<view class="button">
				<u-button 
				shape="circle" 
				size="small"
				:color="themeColor" :plain="!post.userVO.isFocus"
				@click="handleFocus"
				style="transition: all 0.3s ease-in-out"
				>
					{{post.userVO.isFocus ? '已关注' :'关注TA'}}
				</u-button>
			</view>
			<view class="icon">
				<u-icon name="share-square" size="24"></u-icon>
			</view>
		</view>

		<!-- 帖子内容 -->
		<view class="post-content">
			<swiper v-if="post.images && post.images.length > 0" indicator-dots autoplay circular>
				<swiper-item v-for="item in post.images" :key="item.url">
					<image :src="item.url" mode="aspectFill" />
				</swiper-item>
			</swiper>
			<view class="app-title"> {{ post.title }} </view>
			<view class="app-content"> {{ post.content }} </view>
			<view class="tags">
				<view class="tag">#桌游</view>
				<view class="tag">#聚会</view>
			</view>
			<view class="info">
				<view class="time">{{ post.createTime }}</view>
				<view class="location">广东</view>
				<view class="area">#{{ post.area }}</view>
			</view>
		</view>

		<!-- 评论区 -->
		<CommentArea
			:post="post"
			:commentList="commentArr"
			:userData="userData"
			@submitComment="handleSubmitComment"
			@like="handleLike"
			@collect="handleCollect"
			@delete="handleDelete"
		/>
	</view>
</template>

<script>
import request from '@/api/http.js';
import Popup from '@/components/Popup/Popup.vue';
import CommentArea from '@/components/CommentArea/CommentArea.vue';
// import Popup from './components/Popup.vue';

export default {
	components: {
		Popup,
		CommentArea
	},
	data() {
		return {
			id: 0, // 帖子id
			post: {}, // 帖子内容
			commentArr: [], // 评论区
			showCommentPopup: false, // 评论弹出层
			showOperationPopup: false, // 长按评论弹出操作栏
			commentContent: '', // 评论输入框内容
			operatingComment: {}, // 正在操作的评论
			userData: {}, // 用户数据
		};
	},
	onLoad(options) {
		this.id = options.id;
		this.getUserData();
		this.getPostDetail();
		this.getComment();
	},
	methods: {
		// 异步获取用户数据
		async getUserData() {
			// 发送请求，获取用户数据
			const res = await request(`/user/getUserData`);
			// 将获取到的数据赋值给userData
			this.userData = res.data;
		},
		async getPostDetail() {
			// 获取帖子详情
			let res = await request(`/forum/postDetail?id=${this.id}`);
			this.post = res.data;
		},
		async getComment() {
			// 获取评论
			let res = await request(`/comments/get?type=${0}&postId=${this.id}`);
			this.commentArr = res.data ? [...res.data] : [];
		},
		async handleRefresh() {
			// 刷新评论
			this.getPostDetail();
			this.getComment();
		},
		// ------------ 评论区组件方法 ----------------
		async handleSubmitComment(comment) {
			await request('/comments/save', comment, 'POST');
			this.handleRefresh();
		},
		async handleLike() {
			// 0 取消点赞 1 点赞
			let likeForm = { postsId: this.id, type: 0, operation: this.post.liked ? 0 : 1 };
			console.log(likeForm);

			const res = await request(`/forum/like`, likeForm, 'POST');
			this.handleRefresh();
		},
		async handleCollect() {
			await request(
				`/forum/collect`,
				{
					postsId: this.id,
					operation: this.post.collected ? 0 : 1 // 0 取消点赞 1 点赞
				},
				'POST'
			);
			this.handleRefresh();
		},
		async handleDelete() {
			this.handleRefresh();
		},
		async handleFocus() {
			// 关注
			await request(
				`/user/focus`,
				{
					focusId: this.post.userVO.id,
					operation: !this.post.userVO.isFocus // false 取消点赞 true 点赞
				},
				'POST'
			);
			this.handleRefresh();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff !important;
}

.container {
	padding-top: 0;
}

.author-info {
	position: sticky;
	top: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	width: $max-width;
	border-bottom: solid 1px #eee;
	padding: 20rpx 25rpx;
	background-color: #fff;

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}

	.info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		.name {
			font-size: 32rpx;
			font-weight: bold;
			margin-right: 20rpx;
		}

		.desc {
			font-size: 24rpx;
			color: #999;
		}
	}

	.button {
		width: 100rpx;
		margin-left: auto;
		margin-right: 30rpx;
	}

	.icon {
		margin-right: 20rpx;
	}
}

.post-content {
	margin-top: 20rpx;
	width: $max-width;
	border-bottom: solid 1px #eee;
	padding-bottom: 20rpx;

	swiper {
		width: 100%;
		height: 400rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		swiper-item {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
			}
		}
	}

	.app-content {
		// 自动换行
		word-wrap: break-word;
		word-break: break-all;
		white-space: pre-wrap;
	}

	.tags {
		display: flex;
		margin-top: 20rpx;

		.tag {
			font-size: $font-size-small;
			color: $theme-color;
			margin-right: 20rpx;
		}
	}

	.info {
		display: flex;
		align-items: center;
		font-size: $font-size-small;
		color: #999;

		.time {
			margin-right: 20rpx;
		}

		.location {
			margin-right: 20rpx;
		}

		.area {
			color: $theme-color;
			margin-left: auto;
			margin-right: 20rpx;
		}
	}
}

.comment-area {
	display: flex;
	flex-direction: column;
	width: $max-width;

	.count {
		font-size: $font-size-small;
		color: #999;
		margin-top: 20rpx;
	}

	.comment-bar {
		display: flex;
		margin-top: 20rpx;

		.bar {
			font-size: $font-size-small;
			color: #999;
			background-color: #eee;
			width: 400rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			border-radius: 50rpx;
			height: 60rpx;
		}
	}

	.empty {
		margin-top: 40rpx;
	}

	.comment-list {
		width: 100%;
		display: flex;
		flex-direction: column;

		.comment-item {
			display: flex;
			margin-top: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: solid 1px #eee;

			&:active {
				background-color: #e9e9e9;
			}

			.avatar {
				width: 60rpx;
				height: 60rpx;
				min-width: 60rpx;
				max-width: 60rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.comment-content {
				display: flex;
				flex-direction: column;
				font-size: $font-size-base;

				.info {
					display: flex;
					align-items: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					line-height: 1em;

					.name {
						font-size: $font-size-small;
						color: #333;
						font-weight: bold;
						margin-right: 10rpx;
					}

					.desc {
						font-size: $font-size-small;
						color: #999;
					}
				}

				.content {
					margin: 0;
					margin-top: 5rpx;
				}

				.time {
					font-size: $font-size-small;
					color: #999;
					margin-top: 5rpx;
				}
			}
		}

		.second-level-comment {
			padding-left: 60rpx;

			.avatar {
				width: 60rpx;
				height: 60rpx;
				min-width: 60rpx;
				max-width: 60rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}

.footer-bar {
	position: fixed;
	z-index: 10;
	bottom: 0;
	width: $max-width;
	height: 100rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-around;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	padding: 0 25rpx;

	.user {
		display: flex;

		.bar {
			font-size: $font-size-small;
			color: #999;
			background-color: #eee;
			width: 200rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			border-radius: 50rpx;
			height: 60rpx;
		}
	}

	.bar-item {
		display: flex;
	}

	@keyframes thumb-up {
		0% {
			transform: scale(1) rotate(0deg);
		}

		50% {
			transform: scale(0.8) rotate(10deg);
		}

		75% {
			transform: scale(1.2) rotate(-20deg);
		}

		100% {
			transform: scale(1) rotate(0deg);
		}
	}

	.uicon-thumb-up-fill {
		animation: thumb-up 1s ease-in-out;
		transition: color 0.5s ease-in-out;
	}

	@keyframes collect {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(0.8);
		}

		75% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}
	}

	.uicon-star-fill {
		animation: collect 1s ease-in-out;
		transition: color 0.5s ease-in-out;
	}
}

.placeholder {
	width: 750rpx;
	height: 100rpx;
}

.input-bar {
	display: flex;
	margin: 20rpx 0;

	input {
		background-color: #eee;
		width: 550rpx;
		padding: 0 25rpx;
		border-radius: 50rpx;
		margin-left: 20rpx;
		margin-right: auto;
		height: 2em;
	}

	.submit {
		background-color: $theme-color;
		width: 100rpx;
		height: 60rpx;
		border-radius: 60rpx;
		margin-right: 20rpx;
		color: #fff;
		font-size: $font-size-small;
		display: flex;
		justify-content: center;
		align-items: center;

		&:active {
			background-color: $theme-color-dark;
		}
	}
}

.operation-bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;

	.cell {
		display: flex;
		justify-content: center;
		width: 100%;
		padding: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: $font-size-base;
		border-bottom: 1px solid #eee;

		/* 评论 */
		&:nth-child(1) {
			color: #666;
			font-size: $font-size-small;
		}

		/* 删除 */
		&:nth-child(4) {
			border-bottom: 10rpx solid #eee;
			color: $uni-color-error;
		}
	}
}
</style>
